<!DOCTYPE html>
<html lang="CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<body>
    <script>
        // js是设置页面行为  写在标签script中
        let a = 10;
        // 加入日志
        console.log(a);
        // 得到数据类型
        console.log(typeof(a));
        b = '10';
        console.log(b==a);//true 会判断值和字符串 俩个其中一个相同就是true而===不会
        console.log(b===a);//false 

        //数组
        let arr = [];
        let arr1 = new Array;
        console.log(typeof(arr));
        console.log(typeof(arr1));
        
        //非常自由 可以理解为顺序表
        arr[0] = '1';
        arr[1] = 2;
        arr.push(true);
        arr[100] = "wow"
        arr.push(true);
        console.log(arr);

        //函数
        sum(1,2);
        function sum(x,y){
            console.log(x+y);
        }
        
        let sum1 = function(x,y){

            let sum = 0;//定义变量 类 函数。。。
            for(i = 0; i< 10;i++){
                sum+=i;
            }
            return sum;
        }
        let s = sum1(10,345,55);//多传也不管
        console.log(s + "ww");

        //类的创建
        let cls = {
            age: 10,
            name: "xx",
            prin: function(){
                console.log("xxx");
            }

        }
        //使用
        console.log(cls.age);
        console.log(cls.name);
        cls.prin();
        //可以使用数组方式调用类成员
        console.log(cls['age']);
        console.log(cls['prin']);
        
        //使用object类来创造对象
        let xx = new Object;
        xx.wow = "ww";
        xx.yy = "hh";
        console.log(xx);

        //在类外创建构造函数创造类
        function wow(age,name){
            this.age = age;
            this.name =name;
        }

        let l1 = new wow(100,'11');
        let l2 = new wow(   12,'xx');
        console.log(l1);
        console.log(l2);

        </script>
</body>


<body>
    <ol id = 'line'>
        <li> 1</li>
        <li> 2</li>
        <li> 3</li>
    </ol>
    <input type = 'button' value = '加一行' id = 'bt'><br>
    
    <!-- 文本记录 -->
    <input type = 'text' id = 'text1' value="default">
    
    <button type= "button" id = 'submit'>
        提交
    </button><br>

    <button type= "button" id = 'id1'>
        js
    </button>
    <!-- 导入jquery -->
        <script src = "C:\Users\15328\OneDrive\桌面\files\gitee\frontEnd\java-ee\jquery-3.7.1.js"></script>
        
        <!-- jQuery 对用户的行为进行一些对应的操作 -->
        <script>           
        $("#text1").click(function(){
            let ss = ("#text1").text();
            console.log(ss+ss); 
        })
            $("#submit").click(function(){
                //获取的是标签间的纯文本
                let ss = $('#text1').text();
                let s1 = $('#text1').val();
                let s2 = $('#text1').html();
                
                console.log("ss= "+ss+" ss")
                console.log("ss= "+s1+" ss")
                console.log("ss= "+s2+" ss")
            })

            $("document").ready(function(){
                // alert("加载完成");
                console.log('yes');
            });

            // 获得text中的元素
            // let ss = $('#text').text();
            
            let f = 4;
            let e = 4;
            //# 对id
            $('#bt').click(function(){
                    // alert("eee");
                    //js中换行是<br>
                $('#line').after(f+". "+e+"<br>");
                    f++,e++;
                    // 头插
                $('#line').prepend("prepend");
                // 在当前位置的下一行插入
                $("#line").after("after");
                // 在当前位置的上一行插入
                $("#line").before("before");
                // 全部删了
                $('#line').remove();
            });

            $('#id1').click(function(){
                    alert("eee");
            });

            // $(".bt").click(function(){
            //         alert("eee");
            // });
            // function submit(){
            //     alert("eee");
            // }
            
            
        </script>
     
</body>

</html>